<div class="container">

	<div class="row">
		
		<div class="col-md-12">
			
			<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">用户</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       
      <form class="navbar-form navbar-left" action='{:url("index/index")}' method="get">
        <div class="form-group">
          关键字：<input type="text" class="input-medium search-query" name="kwd" value="{$search.kwd}" />
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
           &ensp;共计<strong>&nbsp;{$total}&nbsp;</strong>条记录
      </form>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


		</div>
	</div>

	
	<div class="row"> 
	<div class="col-md-12"> 
	 	<div class="pull-right"><!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-small adduser" >
 +添加
</button></div>

		<table class="table table-hover table-bordered table-condensed">
			<thead>
				<tr>
					<th>ID</th>
					<th>用户名</th>
					<th>真实姓名</th>
					<th>e-mail</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				{volist name="ls" id="vo"}
				<tr>
					<td>{$vo.id}</td>
					<td>{$vo.username}</td>
					<td>{$vo.truename}</td>
					<td>{$vo.email}</td>
					<td>
						<a  href="javascript:;" class="de fault-primary edituser" rel="{$vo.id}" > <span class="glyphicon glyphicon-edit"></span>
</a>
						<a  href="{:url('index/userdel',['id'=>$vo.id])}" class="de fault-primary" onclick="return confirm('确认删除?')" ><span class="glyphicon glyphicon-trash"></span></a>
					</td>
				</tr>
				{/volist}
			</tbody>
		</table>


	</div>
	<div class="row text-center">{$page|raw}</div>
</div>
</div>

<div id="app">
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
		      </div>
		      <div class="modal-body">
		         <form action="/index/user_edit" method="POST" role="form">
		         	<legend>用户资料</legend>
		         
		         	<div class="form-group">
		         		<label for="">用户名</label>
		         		<input type="text"  name="username" class="form-control" id="" placeholder="请输入用户名" v-model="uinfo.username">
		         	</div>
		         	<div class="form-group">
		         		<label for="">真实姓名</label>
		         		<input type="text" name="truename" class="form-control" id="" placeholder="请输入真实姓名"  v-model="uinfo.truename">
		         	</div>
		         	<div class="form-group">
		         		<label for="">e-mail</label>
		         		<input type="text" name="email"  class="form-control" id="" placeholder="请输入邮件"  v-model="uinfo.email">
		         	</div>
		         	<div class="form-group">
		         		<label for="">密码</label>
		         		<input type="text" name="password" class="form-control" id="" placeholder="不修改请留空" >
		         	</div>
		         
		         	
		         	<input type="hidden" name="id"  v-model="uinfo.id" />
		         	<button type="submit" class="btn btn-primary">保存</button>
		         </form>
		      </div>
		      
		    </div>
		  </div>
		</div>
</div>
 

<script type="text/javascript">
	 
var app = new Vue({
  el: '#app',
  data: {
    uinfo:{
    	 
    }
  }
})


$(".edituser").click(function(event) {
	 let _id  = $(this).attr("rel");
	 $.get('/index/user_edit',{id:_id},function(data) {
	 	 	$('#myModal').modal('show') ;
	 	 	app.uinfo=  data.uinfo; 
	 });
});

$(".adduser").click(function(event) {
	  app.uinfo={};
	  $('#myModal').modal('show') ;
});
</script>